<style lang="scss">
  .ui-page {
    padding-bottom: 20px;

    .ui-detail-box {
      .ui-detail-btus {
        // text-align: right;
      }
    }
  }
</style>
<template>
  <div class="ui-page">
    <div class="ui-list ui-box">
      <div class="box-header ui-list-header">
        <div>学生{{this.$route.query.title}}</div>
        <div>
          <el-button type="primary" size="mini" @click="back">返回</el-button>
        </div>
      </div>
      <div class="ui-detail-box">
        <el-form class="ui-search-form" label-width="120px">
          <div v-if="this.roleId ===3">
            <el-form-item label="学号">
              <el-input size="mini" class="ui-item-reset" v-model="studentItem.stuNo" disabled></el-input>
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item label="学号">
              <el-input size="mini" class="ui-item-reset" v-model="studentItem.stuNo" :disabled="editFlag"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="学生姓名">
            <el-input size="mini" class="ui-item-reset" v-model="studentItem.stuName" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input size="mini" class="ui-item-reset" v-model="studentItem.stuAge" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select size="mini" class="ui-item-reset" v-model="studentItem.stuSex" :disabled="editFlag">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业">
            <el-input size="mini" class="ui-item-reset" v-model="studentItem.stuMajor" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="年级">
            <el-input size="mini" class="ui-item-reset" v-model="studentItem.stuGrade" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-input size="mini" class="ui-item-reset" v-model="studentItem.stuClass" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input size="mini" class="ui-item-reset" v-model="studentItem.stuPhone" :disabled="editFlag"></el-input>
          </el-form-item>
        </el-form>
        <div class="ui-detail-btus">
          <el-button size="mini" @click="editFlag=false" v-if="editFlag">编辑</el-button>
          <el-button size="mini" @click="cancelEdit" v-else>取消</el-button>
          <el-button type="primary" size="mini" @click="saveItem" :disabled="editFlag">保存</el-button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'studentDetail',
    data() {
      return {
        userId: this.$route.query.id,
        roleId: this.$route.query.roleId,
        studentItem: {},
        editFlag: true,

      }
    },
    created() {
      this.getStudent()
      console.log(this.roleId)
      // this.userItem=this.$route.query.userItem
    },
    methods: {
      back() {
        if (this.roleId === 3){
          this.$router.push({
            path: '/personStudent'
          })
        } else {
          this.$router.back(-1);
        }
      },
      cancelEdit() {
        this.editFlag = !this.editFlag;
        // this.getItem()
      },
      isAdmin() {
        // get(`/pms_api/user/detail`,).then(res => {
        let userInfo = this.$getGlobal.getItem('userInfo')
        console.log(userInfo)
        if (userInfo.roleId != '1' && userInfo.roleId != "2") {
          this.$confirm('此操作仅限超级管理员使用,普通用户请前去个人中心修改密码', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          })
        }
      },
      getStudent() {
        post(`/pms_api/student/detail/?userId=${this.userId}`).then(res => {
          console.log('res', res)
          this.studentItem = res.data[0]
        }).catch(err => {
          console.log(err)
        })
      },
      saveItem() {
        let students = this.studentItem
        console.log('students', students)
        post(`/pms_api/student/edit`, students).then(res => {
          this.cancelEdit()
          this.getStudent()
        }).catch(err => {
          console.log(err)
        })
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      }
    }
  }
</script>
